<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        background-color: azure; height: 500px;width: 800px; display: flex;  .........;
    }
    .box1{
        width: 150px; height: auto; 
    } 
    .box2{
        width: 500px; height: auto;  text-align: left; 
    }
   .xiao{
    margin-left: 50px; margin-right: ; margin-top: 40px;
   }
    .box3{
        width: 150px; height: auto;
    }
</style>
<body>
    <div class="box">
        <div class="box1" >

            <h2>预约入校系统</h2>

        </div>
        <div class="box2" >

            <div class="xiao">

                
            <form action="提交成功.html">

                <label for="xingming">
                    姓名：<input type="text" id="xingming" style=" margin-left: 52px;">
                </label>

                <br>

                性别：
                <label for="man" style="margin-left: 43px;">
                    <input type="radio" name="sex" id="man" checked>男
                </label>  
                <label for="women">
                    <input type="radio" name="sex" id="wumen">女
                </label>

                <br>

                手机号码:
                <label for="number" style=" margin-left: 28px ;">
                    <input type="text" id="number">
                </label>

                <br>

                身份证号码：
                <label for="shenfen">
                    <input type="text" id="shenfen">
                </label>

                <br>

                同行人姓名：
                <label for="tongxing">
                    <input type="text" id="tongxinga">
                </label>

                <br>

                车牌号码：
                <label for="chepai">
                    <input type="text" id="chepai" style="margin-left: 16px;">
                </label>
                
                <br>

                来访日期：
                <label for="riqi">
                    <input type="date" id="riqi" style=" margin-left: 16px; ">
                </label>

                <br>

                来访时间：
                <label for="shijian">
                    <input type="time" id="shijian" style="margin-left: 16px;">
                </label>

                <br>

                来访原因：
                <label for="yuanyin">

                    <select name="" id="yuanyin" style="margin-left: 16px;">
                        <option value="">公务</option>
                        <option value="">会友</option>
                        <option value="">游玩</option>
                        <option value="">考试</option>
                        <option value="">培训</option>
                    </select>
                </label>

                <br>

                <p>其他原因:</p>
                <label for="">
                    <textarea name="" id="" cols="23" rows="8" style="margin-left: 102px;"></textarea>
                </label>

                <input type="submit" value="确定预约" style=" width: 100px; margin-left: 140px; margin: top 30px; " onclick="javascript=alert('预约成功!')">

            </form>
            
            

            </div>

        </div>
        <div class="box3">

            <a href="mmm.html" onclick="javascript=alert('即将跳转')" style="font-size: small; color: red;">遇到了问题？点击反馈</a>

        </div>
    </div>
</body>
</html>